<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>在线聊天室 - Amaya丶夜雨博客 - Amayaliu</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
    <meta name="Author" content="Amaya丶夜雨" /><!--作者-->

    <link href="CSS/Index.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
    <div id="background" class="wall"></div>
    <div id="midground" class="wall"></div>
    <div id="foreground" class="wall"></div>
    <div id="top" class="wall"></div>

    <div id="Amaya">
        <div class="Register">
            <input type="text" id="name" placeholder="输入自己心仪的聊天名称"><br />
            <button id="setname" class="RegisterSubmit">设 置</button><br />
        </div>
    </div>
    <div id="header">
        <input type="text" id="text" placeholder="输入发送内容">
        <button id="btn">发送</button>
    </div>
    <div id="body">
        <div id="container"></div>
        <div id="chatterlist">
            <p class="chatterlist-head">在线用户(0)</p>
        </div>
    </div>

    <script>
        var ws = null;

        document.getElementById('setname').onclick = function () {
            var name = document.getElementById('name').value;
            if (name === '') {
                name = "DefaultN";
            }
			
			//var hostname = '' || location.hostname;
		    //var protocol = location.protocol === 'https:' ? 'wss' : 'ws';
		    //ws = new WebSocket(protocol + '://' + hostname + ':' + '4399' + '/');

            ws = new WebSocket('ws://127.0.0.1:4399');
			
			//测试，官方链接
			//ws = new WebSocket('wss://echo.websocket.org');

            ws.onopen = function () {
                ws.send(JSON.stringify({
                    name: name,
                    type: 'setname'
                }));
            }

            document.getElementById('btn').onclick = send;
            document.getElementById('text').onkeyup = function (e) {
                if (e.keyCode !== 13) return;
                send();
            }

            ws.onmessage = function (e) {
                var data = JSON.parse(e.data);

                if (data.type === 'chatterList') {
                    var list = JSON.parse(data.list);

                    var oldList = document.getElementById('chatterlist');
                    oldList.innerHTML = '';

                    var p_list_head = document.createElement('p');
                    p_list_head.setAttribute('class', 'chatterlist-head');
                    p_list_head.innerHTML = "在线用户(" + list.length + ")";
                    oldList.appendChild(p_list_head);

                    for (var i = 0; i < list.length; i++) {
                        var p_user = document.createElement('p');
                        p_user.innerHTML = list[i].name;
                        p_user.setAttribute('class', 'userlist-item');
                        oldList.appendChild(p_user);
                    }
                } else {
                    console.log(data);
                    var oldContent = document.getElementById('container');
                    oldContent.insertBefore(createChatDiv(data), oldContent.children[0]);
                }
            }

            var p_name = document.getElementById('name');
            var p_setname = document.getElementById('setname');
            p_name.innerHTML = name;
            p_setname.setAttribute('disabled', true);
            p_name.setAttribute('disabled', true);
            p_setname.style.display = "none";
            p_name.style.border = "none";

            //显示模块
            document.getElementById("Amaya").style.display = "none";
            document.getElementById("header").style.display = "block";
            document.getElementById("body").style.display = "block";

            //取消背景
            document.getElementById("background").style.display = "none";
            document.getElementById("midground").style.display = "none";
            document.getElementById("foreground").style.display = "none";
            document.getElementById("top").style.display = "none";

        }

        function createChatDiv(data) {
            var div = document.createElement('div');
            var p_time = document.createElement('p');
            var p_content = document.createElement('p');

            switch (data.type) {
                case 'serverInformation':
                    p_time.innerHTML = new Date().Format("yyyy-MM-dd hh:mm:ss");
                    p_content.innerHTML = data.message;
                    break;

                case 'chat':
                    p_time.innerHTML = new Date().Format("yyyy-MM-dd hh:mm:ss");
                    p_content.innerHTML = data.name + '&nbsp;:<span class="FontColor"> ' + data.message + '</span>';
                    break;

                default:
                    break;
            }

            p_time.setAttribute('class', 'time');
            p_content.setAttribute('class', 'content');

            div.appendChild(p_time);
            div.appendChild(p_content);
            return div;
        }

        Date.prototype.Format = function (fmt) { //author: meizz
            var o = {
                "M+": this.getMonth() + 1, //月份
                "d+": this.getDate(), //日
                "h+": this.getHours(), //小时
                "m+": this.getMinutes(), //分
                "s+": this.getSeconds(), //秒
                "q+": Math.floor((this.getMonth() + 3) / 3), //季度
                "S": this.getMilliseconds() //毫秒
            };
            if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
            for (var k in o)
                if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
            return fmt;
        }

        function send() {
            if (document.getElementById('text').value === '') return;
            ws.send(JSON.stringify({
                message: document.getElementById('text').value,
                type: 'chat'
            }));
            document.getElementById('text').value = '';
        }

    </script>
    <script src="https://amayaliu.cn/PersonalHabits/BaiduPush.js"></script>
</body>
</html>